/* ==========================================================

   GRAFIKDESIGN STYLE.CSS

   RG DIGITALDRUCKFORUM GÖHRINGER

   Nur stylespezifische Regeln für diese Unterseite.

   Header, Navigation, Footer, Cookie, Back-to-top usw.
   kommen weiterhin aus ../style.css

========================================================== */


/* ==========================================================
   01
   SEITENVARIABLEN
========================================================== */

body#grafikdesign {

  --gd-bg:
    #101315;

  --gd-bg-deep:
    #090b0c;

  --gd-card:
    rgba(255,255,255,.025);

  --gd-line:
    rgba(255,255,255,.10);

  --gd-line-strong:
    rgba(255,255,255,.18);

  --gd-muted:
    rgba(255,255,255,.66);

  --gd-muted-soft:
    rgba(255,255,255,.43);

  --gd-red:
    #c5001a;

  --gd-red-light:
    #ff3046;

}


/* ==========================================================
   02
   PAGE
========================================================== */

.gd-page {

  position:
    relative;

  width:
    100%;

  padding-top:
    92px;

  overflow:
    hidden;

  background:
    var(--gd-bg);

}


/* ==========================================================
   SHELL

   Überall gleiche linke Kante.
========================================================== */

.gd-shell {

  width:
    100%;

  margin:
    0;

  padding-right:
    var(
      --site-gutter,
      clamp(28px,5vw,92px)
    );

  padding-left:
    var(
      --site-gutter,
      clamp(28px,5vw,92px)
    );

}


/* ==========================================================
   03
   BREADCRUMB
========================================================== */

.product-breadcrumb {

  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(255,255,255,.48);

  background:
    var(--gd-bg);

  font-size:
    .76rem;

  font-weight:
    650;

}


.product-breadcrumb a {

  color:
    inherit;

  text-decoration:
    none;

  transition:
    color .25s ease;

}


.product-breadcrumb a:hover,
.product-breadcrumb a:focus-visible {

  color:
    var(--gd-red-light);

}


.product-breadcrumb span {

  color:
    rgba(255,255,255,.23);

}


.product-breadcrumb strong {

  color:
    #ffffff;

}


/* ==========================================================
   04
   ALLGEMEIN
========================================================== */

.gd-section {

  position:
    relative;

  width:
    100%;

  padding:
    96px 0;

  background:
    var(--gd-bg);

}


.gd-section + .gd-section {

  border-top:
    1px solid
    rgba(255,255,255,.05);

}


/* ==========================================================
   KLEINE ÜBERSCHRIFTEN
   IMMER ROT
========================================================== */

.gd-kicker,
.gd-service-label,
.gd-brand-label,
.gd-process-label,
.gd-production-item small,
.gd-service-preview-copy span,
.gd-recognition-copy small {

  color:
    var(--gd-red-light);

}


.gd-kicker {

  margin:
    0 0 14px;

  font-size:
    .76rem;

  font-weight:
    900;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

}


/* ==========================================================
   SECTION INTRO
========================================================== */

.gd-section-intro {

  max-width:
    880px;

  margin:
    0 0 52px;

  text-align:
    left;

}


.gd-section-intro h2,
.gd-brand-copy h2,
.gd-production-copy h2,
.gd-faq-heading h2,
.gd-final-copy h2 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4.35rem
    );

  line-height:
    1;

  letter-spacing:
    -.045em;

  text-align:
    left;

}


.gd-section-intro > p:last-child,
.gd-brand-copy > p,
.gd-production-copy > p {

  max-width:
    700px;

  color:
    var(--gd-muted);

  line-height:
    1.72;

  text-align:
    left;

}


.gd-section-intro > p:last-child {

  margin:
    20px 0 0;

}


/* ==========================================================
   05
   HERO
========================================================== */

.gd-hero {

  position:
    relative;

  min-height:
    680px;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #080808;

}


/* ==========================================================
   HERO BACKGROUND
========================================================== */

.gd-hero-bg {

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  width:
    100%;

  height:
    100%;

  max-width:
    none;

  display:
    block;

  object-fit:
    contain;

  object-position:
    right center;

  transform:
    scale(.78);

  transform-origin:
    right center;

}


/* ==========================================================
   HERO OVERLAY

   Links stärker dunkel für Text,
   rechts bleibt das Bild sichtbar.
========================================================== */

.gd-hero-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:

    linear-gradient(
      90deg,

      rgba(8,8,8,1) 0%,

      rgba(8,8,8,.98) 20%,

      rgba(8,8,8,.91) 36%,

      rgba(8,8,8,.68) 52%,

      rgba(8,8,8,.30) 70%,

      rgba(8,8,8,.08) 88%,

      transparent 100%
    ),

    linear-gradient(
      180deg,

      rgba(8,8,8,.06) 0%,

      transparent 50%,

      rgba(8,8,8,.90) 100%
    );

}


/* ==========================================================
   HERO INNER
========================================================== */

.gd-hero-inner {

  position:
    relative;

  z-index:
    2;

  min-height:
    680px;

  padding-top:
    50px;

  padding-bottom:
    28px;

  display:
    flex;

  flex-direction:
    column;

}


/* ==========================================================
   HERO SERVICES
========================================================== */

.gd-hero-services {

  width:
    fit-content;

  margin:
    0 0 45px;

  padding:
    0;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    34px;

  list-style:
    none;

  font-size:
    .75rem;

  font-weight:
    800;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;

}


.gd-hero-service {

  position:
    relative;

  color:
    rgba(255,255,255,.40);

  transition:
    color .35s ease,
    transform .35s ease;

}


.gd-hero-service::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -8px;

  width:
    0;

  height:
    2px;

  background:
    var(--gd-red-light);

  transition:
    width .35s ease;

}


.gd-hero-service.active {

  color:
    var(--gd-red-light);

  transform:
    translateY(-2px);

}


.gd-hero-service.active::after {

  width:
    100%;

}


/* ==========================================================
   HERO COPY
========================================================== */

.gd-hero-copy {

  width:
    min(650px,58%);

}


.gd-hero-copy h1 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      3.1rem,
      4.8vw,
      5.35rem
    );

  line-height:
    .94;

  letter-spacing:
    -.055em;

}


/* ==========================================================
   HERO WECHSELWORT
========================================================== */

.gd-changing-word {

  display:
    block;

  min-height:
    1.05em;

  margin-top:
    7px;

  color:
    var(--gd-red-light);

  white-space:
    nowrap;

  transition:
    opacity .25s ease,
    transform .25s ease;

}


.gd-changing-word.is-changing {

  opacity:
    0;

  transform:
    translateY(8px);

}


.gd-hero-text {

  max-width:
    590px;

  margin:
    26px 0 0;

  color:
    rgba(255,255,255,.74);

  line-height:
    1.75;

}


/* ==========================================================
   HERO FACTS
========================================================== */

.gd-hero-facts {

  width:
    min(920px,100%);

  margin-top:
    auto;

  padding-top:
    30px;

  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  border-top:
    1px solid
    rgba(255,255,255,.16);

}


.gd-hero-fact {

  position:
    relative;

  min-height:
    105px;

  padding:
    18px 26px;

  display:
    grid;

  grid-template-columns:
    auto minmax(0,1fr);

  gap:
    15px;

  align-items:
    start;

  transition:
    transform .35s ease,
    background .35s ease;

}


.gd-hero-fact:first-child {

  padding-left:
    0;

}


.gd-hero-fact:not(:last-child)::after {

  content:
    "";

  position:
    absolute;

  top:
    18px;

  right:
    0;

  bottom:
    18px;

  width:
    1px;

  background:
    rgba(255,255,255,.14);

}


.gd-hero-fact:hover {

  transform:
    translateY(-4px);

  background:
    linear-gradient(
      180deg,
      rgba(197,0,26,.08),
      transparent
    );

}


/* ==========================================================
   HERO ICONS
========================================================== */

.gd-hero-fact-icon {

  min-width:
    34px;

  color:
    var(--gd-red-light);

}


.gd-hero-fact-icon svg {

  width:
    28px;

  height:
    28px;

  display:
    block;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  transition:
    transform .35s ease,
    filter .35s ease;

}


.gd-hero-fact:hover
.gd-hero-fact-icon svg {

  transform:
    translateY(-3px)
    scale(1.07);

  filter:
    drop-shadow(
      0 0 8px
      rgba(255,48,70,.28)
    );

}


.gd-hero-fact strong {

  display:
    block;

  margin-bottom:
    5px;

  color:
    #ffffff;

  font-size:
    .92rem;

}


.gd-hero-fact p {

  margin:
    0;

  color:
    rgba(255,255,255,.62);

  font-size:
    .75rem;

  line-height:
    1.5;

}


/* ==========================================================
   06
   WAS WIR GESTALTEN
========================================================== */

.gd-services-section {

  background:
    var(--gd-bg);

}


.gd-services-grid {

  width:
    100%;

  margin:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  border-top:
    1px solid
    var(--gd-line);

}


/* ==========================================================
   SERVICE CARD
========================================================== */

.gd-service-card {

  position:
    relative;

  min-height:
    360px;

  padding:
    32px;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  border-bottom:
    1px solid
    var(--gd-line);

  background:
    transparent;

  cursor:
    pointer;

  isolation:
    isolate;

}


.gd-service-card:nth-child(odd) {

  border-right:
    1px solid
    var(--gd-line);

}


.gd-service-card:focus-visible {

  outline:
    1px solid
    var(--gd-red-light);

  outline-offset:
    -1px;

}


/* ==========================================================
   SERVICE NUMBER
========================================================== */

.gd-service-number {

  position:
    relative;

  z-index:
    5;

  color:
    transparent;

  font-size:
    2rem;

  font-weight:
    900;

  line-height:
    1;

  -webkit-text-stroke:
    1px
    rgba(255,255,255,.27);

  transition:
    opacity .35s ease,
    transform .35s ease,
    -webkit-text-stroke-color .35s ease;

}


/* ==========================================================
   SERVICE NORMAL TEXT
========================================================== */

.gd-service-normal {

  position:
    relative;

  z-index:
    5;

  margin-top:
    auto;

  transition:
    opacity .35s ease,
    transform .40s ease;

}


.gd-service-label {

  margin:
    0 0 8px;

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}


.gd-service-normal h3 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      1.55rem,
      2.3vw,
      2.5rem
    );

  line-height:
    1;

  letter-spacing:
    -.04em;

}


.gd-service-normal > p:last-child {

  max-width:
    520px;

  margin:
    16px 0 0;

  color:
    var(--gd-muted);

  line-height:
    1.7;

}


/* ==========================================================
   SERVICE PREVIEW
========================================================== */

.gd-service-preview {

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  overflow:
    hidden;

  opacity:
    0;

  transform:
    scale(.95);

  transition:
    opacity .42s ease,
    transform .65s
    cubic-bezier(.2,.75,.25,1);

}


.gd-service-preview img {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  max-width:
    none;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  transform:
    scale(1.08);

  transition:
    transform .75s
    cubic-bezier(.2,.75,.25,1);

}


.gd-service-preview-shade {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:

    linear-gradient(
      180deg,
      rgba(7,8,9,.02) 0%,
      rgba(7,8,9,.08) 40%,
      rgba(7,8,9,.88) 100%
    );

}


.gd-service-preview-copy {

  position:
    absolute;

  z-index:
    2;

  right:
    28px;

  bottom:
    27px;

  left:
    28px;

  opacity:
    0;

  transform:
    translateY(16px);

  transition:
    opacity .35s ease .08s,
    transform .35s ease .08s;

}


.gd-service-preview-copy span {

  display:
    block;

  margin-bottom:
    8px;

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}


.gd-service-preview-copy strong {

  color:
    #ffffff;

  font-size:
    clamp(
      1.7rem,
      2.5vw,
      2.7rem
    );

  line-height:
    .96;

  letter-spacing:
    -.045em;

}


/* ==========================================================
   SERVICE HOVER
========================================================== */

.gd-service-card:hover
.gd-service-normal,

.gd-service-card:focus
.gd-service-normal,

.gd-service-card.is-preview
.gd-service-normal {

  opacity:
    0;

  transform:
    translateY(20px);

}


.gd-service-card:hover
.gd-service-number,

.gd-service-card:focus
.gd-service-number,

.gd-service-card.is-preview
.gd-service-number {

  opacity:
    .78;

  transform:
    translateY(-4px);

  -webkit-text-stroke-color:
    var(--gd-red-light);

}


.gd-service-card:hover
.gd-service-preview,

.gd-service-card:focus
.gd-service-preview,

.gd-service-card.is-preview
.gd-service-preview {

  opacity:
    1;

  transform:
    scale(1);

}


.gd-service-card:hover
.gd-service-preview img,

.gd-service-card:focus
.gd-service-preview img,

.gd-service-card.is-preview
.gd-service-preview img {

  transform:
    scale(1);

}


.gd-service-card:hover
.gd-service-preview-copy,

.gd-service-card:focus
.gd-service-preview-copy,

.gd-service-card.is-preview
.gd-service-preview-copy {

  opacity:
    1;

  transform:
    translateY(0);

}


/* ==========================================================
   07
   PASSEND ZUM UNTERNEHMEN
========================================================== */

.gd-brand-section {

  background:
    var(--gd-bg-deep);

}


.gd-brand-layout {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0,.85fr)
    minmax(420px,1.15fr);

  gap:
    clamp(60px,8vw,130px);

  align-items:
    start;

}


.gd-brand-copy {

  max-width:
    720px;

}


.gd-brand-copy > p {

  margin:
    20px 0 0;

}


/* ==========================================================
   BRAND BOARD
========================================================== */

.gd-brand-board {

  width:
    100%;

  border-top:
    1px solid
    var(--gd-line);

}


/* ==========================================================
   BRAND ROW
========================================================== */

.gd-brand-row {

  position:
    relative;

  min-height:
    110px;

  padding:
    22px 18px 22px 0;

  overflow:
    hidden;

  display:
    grid;

  grid-template-columns:
    140px minmax(0,1fr);

  gap:
    30px;

  align-items:
    center;

  border-bottom:
    1px solid
    var(--gd-line);

  transition:
    padding-left .35s ease,
    background .35s ease,
    border-color .35s ease;

}


.gd-brand-row::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    0;

  width:
    3px;

  background:
    var(--gd-red-light);

  transform:
    scaleY(0);

  transform-origin:
    center;

  transition:
    transform .35s ease;

}


.gd-brand-row:hover {

  padding-left:
    20px;

  border-color:
    rgba(255,48,70,.32);

  background:

    linear-gradient(
      90deg,
      rgba(197,0,26,.15),
      rgba(197,0,26,.035) 58%,
      transparent
    );

}


.gd-brand-row:hover::before {

  transform:
    scaleY(1);

}


.gd-brand-label {

  font-size:
    .72rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


/* ==========================================================
   BRAND FARBE
========================================================== */

.gd-brand-colors {

  display:
    flex;

  gap:
    10px;

}


.gd-brand-colors i {

  width:
    54px;

  height:
    54px;

  display:
    block;

  border:
    1px solid
    rgba(255,255,255,.14);

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}


.gd-brand-colors i:nth-child(1) {

  background:
    #c5001a;

}


.gd-brand-colors i:nth-child(2) {

  background:
    #ffffff;

}


.gd-brand-colors i:nth-child(3) {

  background:
    #24282a;

}


.gd-brand-row:hover
.gd-brand-colors i {

  background:
    var(--gd-red-light);

  border-color:
    var(--gd-red-light);

  box-shadow:
    0 0 25px
    rgba(255,48,70,.18);

}


.gd-brand-row:hover
.gd-brand-colors i:nth-child(1) {

  transform:
    translateY(-4px);

}


.gd-brand-row:hover
.gd-brand-colors i:nth-child(2) {

  transform:
    translateY(-8px);

}


.gd-brand-row:hover
.gd-brand-colors i:nth-child(3) {

  transform:
    translateY(-4px);

}


/* ==========================================================
   BRAND TYPOGRAFIE
========================================================== */

.gd-brand-type {

  display:
    flex;

  align-items:
    baseline;

  gap:
    20px;

}


.gd-brand-type strong {

  color:
    #ffffff;

  font-size:
    2.6rem;

  letter-spacing:
    -.07em;

  transition:
    color .3s ease,
    transform .3s ease;

}


.gd-brand-type small {

  color:
    var(--gd-muted);

  transition:
    color .3s ease;

}


.gd-brand-row:hover
.gd-brand-type strong,

.gd-brand-row:hover
.gd-brand-type small {

  color:
    var(--gd-red-light);

}


.gd-brand-row:hover
.gd-brand-type strong {

  transform:
    translateX(5px);

}


/* ==========================================================
   BRAND GESTALTUNG
========================================================== */

.gd-brand-lines {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}


.gd-brand-lines i {

  height:
    3px;

  display:
    block;

  background:
    rgba(255,255,255,.38);

  transition:
    width .35s ease,
    background .35s ease;

}


.gd-brand-lines i:nth-child(1) {

  width:
    78%;

}


.gd-brand-lines i:nth-child(2) {

  width:
    58%;

}


.gd-brand-lines i:nth-child(3) {

  width:
    38%;

  background:
    var(--gd-red-light);

}


.gd-brand-row:hover
.gd-brand-lines i {

  background:
    var(--gd-red-light);

}


.gd-brand-row:hover
.gd-brand-lines i:nth-child(1) {

  width:
    92%;

}


.gd-brand-row:hover
.gd-brand-lines i:nth-child(2) {

  width:
    72%;

}


.gd-brand-row:hover
.gd-brand-lines i:nth-child(3) {

  width:
    52%;

}


/* ==========================================================
   WIEDERERKENNUNG
========================================================== */

.gd-recognition {

  display:
    flex;

  align-items:
    center;

  gap:
    22px;

}


.gd-recognition-icon {

  position:
    relative;

  width:
    68px;

  height:
    68px;

  flex:
    0 0 68px;

  display:
    grid;

  place-items:
    center;

}


.gd-recognition-ring {

  position:
    absolute;

  border:
    1px solid
    rgba(255,255,255,.26);

  border-radius:
    50%;

  transition:
    border-color .35s ease;

}


.gd-recognition-ring--outer {

  width:
    64px;

  height:
    64px;

}


.gd-recognition-ring--inner {

  width:
    38px;

  height:
    38px;

}


.gd-recognition-dot {

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    var(--gd-red-light);

}


.gd-recognition-copy {

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.gd-recognition-copy small {

  font-size:
    .60rem;

  font-weight:
    900;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


.gd-recognition-copy strong {

  color:
    #ffffff;

  font-size:
    clamp(
      1.35rem,
      2vw,
      2rem
    );

  letter-spacing:
    -.035em;

  transition:
    color .3s ease,
    transform .3s ease;

}


/* ==========================================================
   WIEDERERKENNUNG HOVER
========================================================== */

.gd-brand-row--result:hover
.gd-recognition-copy strong {

  color:
    var(--gd-red-light);

  transform:
    translateX(5px);

}


.gd-brand-row--result:hover
.gd-recognition-ring {

  border-color:
    var(--gd-red-light);

}


.gd-brand-row--result:hover
.gd-recognition-ring--outer {

  animation:
    gdRecognitionOuter
    1.5s ease-in-out infinite;

}


.gd-brand-row--result:hover
.gd-recognition-ring--inner {

  animation:
    gdRecognitionInner
    1.5s ease-in-out infinite;

}


.gd-brand-row--result:hover
.gd-recognition-dot {

  animation:
    gdRecognitionDot
    1.5s ease-out infinite;

}


@keyframes gdRecognitionOuter {

  0%,
  100% {

    transform:
      scale(.88);

    opacity:
      .4;

  }

  50% {

    transform:
      scale(1.05);

    opacity:
      1;

  }

}


@keyframes gdRecognitionInner {

  0%,
  100% {

    transform:
      scale(1);

  }

  50% {

    transform:
      scale(.76);

  }

}


@keyframes gdRecognitionDot {

  0% {

    box-shadow:
      0 0 0 0
      rgba(255,48,70,.40);

  }

  70% {

    box-shadow:
      0 0 0 16px
      rgba(255,48,70,0);

  }

  100% {

    box-shadow:
      0 0 0 0
      rgba(255,48,70,0);

  }

}


/* ==========================================================
   08
   PROZESS
========================================================== */

.gd-process-section {

  background:
    var(--gd-bg);

}


.gd-process-list {

  width:
    100%;

  border-top:
    1px solid
    var(--gd-line);

}


.gd-process-item {

  min-height:
    145px;

  padding:
    28px 0;

  display:
    grid;

  grid-template-columns:
    90px
    minmax(190px,.45fr)
    minmax(0,1fr);

  gap:
    30px;

  align-items:
    start;

  border-bottom:
    1px solid
    var(--gd-line);

  transition:
    padding-left .3s ease,
    background .3s ease;

}


.gd-process-item:hover {

  padding-left:
    18px;

  background:
    linear-gradient(
      90deg,
      rgba(197,0,26,.07),
      transparent 68%
    );

}


.gd-process-number {

  color:
    transparent;

  font-size:
    2rem;

  font-weight:
    900;

  line-height:
    1;

  -webkit-text-stroke:
    1px
    rgba(255,255,255,.27);

}


.gd-process-label {

  display:
    block;

  margin-bottom:
    5px;

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


.gd-process-title h3 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      1.3rem,
      2vw,
      2rem
    );

  letter-spacing:
    -.035em;

}


.gd-process-item > p {

  max-width:
    650px;

  margin:
    0;

  color:
    var(--gd-muted);

  line-height:
    1.7;

}


/* ==========================================================
   09
   GESTALTUNG + PRODUKTION
========================================================== */

.gd-production-section {

  background:
    var(--gd-bg-deep);

}


.gd-production-layout {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0,.85fr)
    minmax(420px,1.15fr);

  gap:
    clamp(60px,8vw,130px);

  align-items:
    start;

}


.gd-production-copy {

  max-width:
    720px;

}


.gd-production-copy > p {

  margin:
    20px 0 0;

}


.gd-production-list {

  width:
    100%;

  border-top:
    1px solid
    var(--gd-line);

}


.gd-production-item {

  min-height:
    112px;

  padding:
    22px 0;

  display:
    grid;

  grid-template-columns:
    62px minmax(0,1fr);

  gap:
    20px;

  align-items:
    start;

  border-bottom:
    1px solid
    var(--gd-line);

  transition:
    padding-left .3s ease,
    background .3s ease;

}


.gd-production-item:hover {

  padding-left:
    14px;

  background:
    linear-gradient(
      90deg,
      rgba(197,0,26,.06),
      transparent 72%
    );

}


.gd-production-item > span {

  color:
    transparent;

  font-size:
    1.35rem;

  font-weight:
    900;

  line-height:
    1;

  -webkit-text-stroke:
    1px
    rgba(255,255,255,.28);

  transition:
    -webkit-text-stroke-color .3s ease;

}


.gd-production-item:hover > span {

  -webkit-text-stroke-color:
    var(--gd-red-light);

}


.gd-production-item small {

  display:
    block;

  margin-bottom:
    4px;

  font-size:
    .60rem;

  font-weight:
    900;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


.gd-production-item strong {

  display:
    block;

  color:
    #ffffff;

  font-size:
    1.08rem;

}


.gd-production-item p {

  margin:
    5px 0 0;

  color:
    var(--gd-muted);

  font-size:
    .82rem;

  line-height:
    1.6;

}


/* ==========================================================
   10
   FAQ
========================================================== */

.gd-faq-section {

  background:
    var(--gd-bg-deep);

}


.gd-faq-heading {

  max-width:
    900px;

  margin:
    0 0 52px;

  text-align:
    left;

}


.gd-faq-list {

  width:
    100%;

  border-top:
    1px solid
    var(--gd-line);

}


.gd-faq-item {

  border-bottom:
    1px solid
    var(--gd-line);

}


.gd-faq-item summary {

  padding:
    26px 0;

  display:
    grid;

  grid-template-columns:
    1fr 34px;

  gap:
    20px;

  align-items:
    center;

  color:
    #ffffff;

  list-style:
    none;

  cursor:
    pointer;

  font-size:
    1.18rem;

  font-weight:
    750;

}


.gd-faq-item
summary::-webkit-details-marker {

  display:
    none;

}


.gd-faq-item summary b {

  color:
    var(--gd-red-light);

  font-size:
    1.50rem;

  font-weight:
    300;

  text-align:
    center;

  transition:
    transform .30s ease;

}


.gd-faq-item[open]
summary b {

  transform:
    rotate(45deg);

}


.gd-faq-item > p {

  max-width:
    820px;

  margin:
    0;

  padding:
    0 50px 28px 0;

  color:
    var(--gd-muted);

  line-height:
    1.7;

}


/* ==========================================================
   11
   ANFRAGE
========================================================== */

.gd-final-section {

  padding-top:
    72px;

  padding-bottom:
    105px;

  background:
    var(--gd-bg);

}


.gd-final-card {

  position:
    relative;

  padding:
    clamp(
      42px,
      5vw,
      68px
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    28px;

  background:

    radial-gradient(
      circle at 5% 20%,
      rgba(197,0,26,.13),
      transparent 38%
    ),

    rgba(255,255,255,.025);

  box-shadow:
    0 30px 70px
    rgba(0,0,0,.22);

}


.gd-final-card::before,
.gd-final-card::after {

  display:
    none !important;

  content:
    none !important;

}


.gd-final-copy {

  max-width:
    850px;

}


.gd-final-copy
> p:not(.gd-kicker) {

  max-width:
    720px;

  margin:
    22px 0 0;

  color:
    var(--gd-muted);

  line-height:
    1.7;

}


.gd-final-button {

  min-height:
    56px;

  margin-top:
    30px;

  padding:
    16px 29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  background:
    #f10d1b;

  border:
    1px solid
    #f10d1b;

  border-radius:
    999px;

  box-shadow:
    0 15px 35px
    rgba(241,13,27,.24);

  font-size:
    .94rem;

  font-weight:
    850;

  text-decoration:
    none;

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


.gd-final-button:hover,
.gd-final-button:focus-visible {

  color:
    #ffffff;

  background:
    #c5001a;

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 42px
    rgba(241,13,27,.32);

  outline:
    none;

}


/* ==========================================================
   12
   REVEAL
========================================================== */

.reveal {

  opacity:
    0;

  transform:
    translateY(28px);

  transition:
    opacity .75s ease,
    transform .75s ease;

}


.reveal.visible {

  opacity:
    1;

  transform:
    translateY(0);

}


/* ==========================================================
   13
   FOOTER FARBANGLEICHUNG
========================================================== */

body#grafikdesign .footer-small {

  color:
    var(--gray-soft);

}


/* ==========================================================
   14
   RESPONSIVE
========================================================== */


/* ==========================================================
   BIS 1100 PX
========================================================== */

@media (max-width:1100px) {

  .gd-page {

    padding-top:
      86px;

  }


  .gd-brand-layout,
  .gd-production-layout {

    gap:
      70px;

  }

}


/* ==========================================================
   BIS 900 PX
========================================================== */

@media (max-width:900px) {

  .gd-page {

    padding-top:
      82px;

  }


  /* HERO */

  .gd-hero-copy {

    width:
      min(630px,72%);

  }


  /* BRAND */

  .gd-brand-layout,
  .gd-production-layout {

    grid-template-columns:
      1fr;

    gap:
      50px;

  }


  /* PROCESS */

  .gd-process-item {

    grid-template-columns:
      70px
      minmax(170px,.40fr)
      minmax(0,1fr);

    gap:
      24px;

  }

}


/* ==========================================================
   BIS 760 PX
========================================================== */

@media (max-width:760px) {

  .gd-page {

    padding-top:
      76px;

  }


  .gd-section {

    padding:
      78px 0;

  }


  /* --------------------------------------------------------
     BREADCRUMB
  -------------------------------------------------------- */

  .product-breadcrumb {

    min-height:
      50px;

    overflow-x:
      auto;

    white-space:
      nowrap;

  }


  /* --------------------------------------------------------
     HERO
  -------------------------------------------------------- */

  .gd-hero {

    min-height:
      740px;

  }


  .gd-hero-bg {

    object-position:
      62% center;

  }


  .gd-hero-overlay {

    background:

      linear-gradient(
        180deg,

        rgba(8,8,8,.52) 0%,

        rgba(8,8,8,.76) 37%,

        rgba(8,8,8,.94) 67%,

        #080808 100%
      );

  }


  .gd-hero-inner {

    min-height:
      740px;

    padding-top:
      42px;

  }


  .gd-hero-services {

    gap:
      18px;

    font-size:
      .66rem;

  }


  .gd-hero-copy {

    width:
      100%;

  }


  .gd-hero-copy h1 {

    font-size:
      clamp(
        3rem,
        12vw,
        4.7rem
      );

  }


  .gd-changing-word {

    white-space:
      normal;

  }


  .gd-hero-facts {

    grid-template-columns:
      1fr;

    padding-top:
      0;

  }


  .gd-hero-fact,
  .gd-hero-fact:first-child {

    min-height:
      0;

    padding:
      16px 4px;

  }


  .gd-hero-fact:not(:last-child)::after {

    top:
      auto;

    right:
      0;

    bottom:
      0;

    left:
      0;

    width:
      auto;

    height:
      1px;

  }


  /* --------------------------------------------------------
     SERVICES
  -------------------------------------------------------- */

  .gd-services-grid {

    grid-template-columns:
      1fr;

  }


  .gd-service-card:nth-child(odd) {

    border-right:
      0;

  }


  .gd-service-card {

    min-height:
      330px;

  }


  /* --------------------------------------------------------
     PROCESS
  -------------------------------------------------------- */

  .gd-process-item {

    grid-template-columns:
      60px minmax(0,1fr);

    gap:
      20px;

  }


  .gd-process-title {

    grid-column:
      2;

  }


  .gd-process-item > p {

    grid-column:
      2;

  }


  .gd-process-item:hover {

    padding-left:
      0;

  }

}


/* ==========================================================
   BIS 620 PX
========================================================== */

@media (max-width:620px) {

  .gd-section-intro {

    margin-bottom:
      42px;

  }


  /* --------------------------------------------------------
     HERO
  -------------------------------------------------------- */

  .gd-hero {

    min-height:
      760px;

  }


  .gd-hero-inner {

    min-height:
      760px;

  }


  .gd-hero-services {

    margin-bottom:
      36px;

  }


  .gd-hero-text {

    font-size:
      .93rem;

  }


  /* --------------------------------------------------------
     SERVICE CARDS
  -------------------------------------------------------- */

  .gd-service-card {

    min-height:
      300px;

    padding:
      25px 20px;

  }


  .gd-service-preview-copy {

    right:
      20px;

    bottom:
      20px;

    left:
      20px;

  }


  /* --------------------------------------------------------
     BRAND
  -------------------------------------------------------- */

  .gd-brand-row {

    grid-template-columns:
      1fr;

    gap:
      14px;

  }


  .gd-brand-row:hover {

    padding-left:
      14px;

  }


  /* --------------------------------------------------------
     PROCESS
  -------------------------------------------------------- */

  .gd-process-item {

    padding:
      24px 0;

    grid-template-columns:
      48px minmax(0,1fr);

    gap:
      17px;

  }


  /* --------------------------------------------------------
     FAQ
  -------------------------------------------------------- */

  .gd-faq-item summary {

    padding:
      22px 0;

    font-size:
      1.03rem;

  }


  .gd-faq-item > p {

    padding:
      0 0 24px;

  }


  /* --------------------------------------------------------
     FINAL
  -------------------------------------------------------- */

  .gd-final-button {

    width:
      100%;

  }

}


/* ==========================================================
   BIS 460 PX
========================================================== */

@media (max-width:460px) {

  .gd-hero-copy h1 {

    font-size:
      2.75rem;

  }


  .gd-service-card {

    min-height:
      280px;

  }


  .gd-brand-type {

    flex-direction:
      column;

    gap:
      5px;

  }


  .gd-recognition {

    gap:
      14px;

  }


  .gd-recognition-icon {

    width:
      58px;

    height:
      58px;

    flex-basis:
      58px;

  }


  .gd-recognition-ring--outer {

    width:
      54px;

    height:
      54px;

  }


  .gd-recognition-ring--inner {

    width:
      32px;

    height:
      32px;

  }

}


/* ==========================================================
   15
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

  .gd-changing-word,
  .gd-hero-service,
  .gd-hero-fact,
  .gd-hero-fact-icon svg,
  .gd-service-card,
  .gd-service-normal,
  .gd-service-number,
  .gd-service-preview,
  .gd-service-preview img,
  .gd-service-preview-copy,
  .gd-brand-row,
  .gd-brand-colors i,
  .gd-brand-type strong,
  .gd-brand-lines i,
  .gd-recognition-ring,
  .gd-recognition-dot,
  .gd-process-item,
  .gd-production-item,
  .gd-final-button,
  .reveal {

    animation:
      none !important;

    transition:
      none !important;

  }

}